<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <form action="">
    姓名：<input type="text" name="name"><br>
    年龄：<input type="text" name="age"><br>
    性别：<input type="text" name="gender"><br>
    <input type="button" id="btn" value="添加">
  </form>
  <script src="jquery.min.js"></script>
  <script>
    //1.在添加按钮上注册点击事件
    $('#btn').click(function(){
      //2.事件函数：
      //① 获取表单已填写的数据:
      // 获取form标签的jquery对象，在调用serialize()方法，能够获取表单中所有的数据，并组成 key1=value1&key2=value2&...字符串
      // 方法一
      // 1.serialize()方法是jquery的方法，DOM对象不能使用，只能用于jquery方法获取的jquery对象
      // 2.serialize()方法只能获取表单中的数据  不能上传文件(原因是不能将文件中的内容变成字符串格式)(没有formData强大)
      var str = $('form').serialize();
    
      $.ajax({
        url:'/api/addStudent',
        data: str,
        type:'post',
        dataType:'text',
        success:function(msg){
          alert(msg);
        },
      });
    });
  </script>
  <script>
    $('#btn').click(function(){
      //方法一
      var str = document.querySelector('form');
      //方法二 (使用new formData()构造函数 需要使用DOM对象 所以要将jquery对象用get()方法转换成DOM对象)
      var str = $('form').get(0);
      var fd = new FormData(str);

      $.ajax({
        url:'/api/addStudent',
        data:fd,
        type:'post',
        dataType:'text',
        success:function(msg){
          alert(msg);
        },
        //contentType和processData只有在使用FormData对象时设置为false，其余情况均不用设置
        contentType: false,
        processData: false,
      });
    });
  </script>
</body>
</html>